import React from 'react';
import uuid from 'uuid/v4';
import moment from 'moment';
import { Icon } from 'antd';
import classNames from 'classnames/bind';
import './style.css';

export default class Todo extends React.Component {

    constructor() {
        super();
        this.state = {
            todoList: [
            ],
            status: "未完成"
        }
    }

    /**
     * 添加待办
     *
     * @memberof Todo
     */
    handlerAddTodo = (item) => {
        const newItem = {
            status: "未完成",
            value: item,
            createDate: moment().format('YYYY-MM-DD HH:mm:ss'),
            id: uuid()
        }
        const { todoList } = this.state;
        todoList.push(newItem);
        this.setState({
            todoList: todoList
        });
    }

    /**
     * 完成待办
     *
     * @memberof Todo
     */
    handlerCompletedTodo = (id) => {
        const { todoList } = this.state;
        let newList = todoList.map(one => {
            if (one && one.id === id) {
                one.status = '已完成';
            }
            return one;
        });
        this.setState({
            todoList: newList
        });
    }

    /**
     * 删除数据
     *
     * @memberof Todo
     */
    handlerRemoveTodo = (id) => {
        const { todoList } = this.state;
        let newList = todoList.filter(one =>  one.id !== id);
        this.setState({
            todoList: newList
        });
    }

    /**
     *获取当前状态：未完成/已完成/全部
     *
     * @memberof Todo
     */
    getCurrentStatus = (status) => {
        this.setState({
            status: status
        })
    }

    /**
     * 根据状态筛选传递的列表
     *
     * @memberof Todo
     */
    getList = () => {
        const { todoList, status } = this.state;
        return status === "全部" ? todoList : todoList.filter(one => one && one.status === status);
    }

    
    render() {
        const todoList  = this.getList();
        return (
            <div className = "todo">
                <Header  handlerAddTodo = {this.handlerAddTodo} getCurrentStatus={this.getCurrentStatus} />
                {
                    todoList && todoList.length > 0 ? <TodoList todoList = {todoList} handlerRemoveTodo={this.handlerRemoveTodo}
                    handlerCompletedTodo = {this.handlerCompletedTodo}/> : null
                }                
            </div>
        )
    }
}

class Header extends React.Component {

    constructor() {
        super();
        this.state = {
            active: "未完成"
        }
    }

    handlerNonComplete = () => {
        this.setState({
            active: "未完成"
        });
        this.props.getCurrentStatus("未完成");
    }

    handlerCompleted = () => {
        this.setState({
            active: "已完成"
        });
        this.props.getCurrentStatus("已完成");
    }

    handlerAll = () => {
        this.setState({
            active: "全部"
        });
        this.props.getCurrentStatus("全部");
    }

    render() {
        const { active } = this.state;
        return (
            <div className="todo-header">
                <h1>待办列表</h1>
                <div>
                    <button onClick={this.handlerNonComplete} className={classNames("item", active === "未完成" ? "active" : "")}>未完成</button>
                    <button onClick={this.handlerCompleted} className={classNames("item", active === "已完成" ? "active" : "")}>已完成</button>
                    <button onClick={this.handlerAll} className={classNames("item", active === "全部" ? "active" : "")}>全部</button>
                </div>
                <div>
                    <AddTodo handlerAddTodo = {this.props.handlerAddTodo}/>
                </div>
            </div>
        )
    }
}

class AddTodo extends React.Component {

    constructor() {
        super();
        this.state = {
            todoItem: "",
            isRequire: false
        }
    }

    handlerTodoItem = (e) => {
        const value = e && e.target && e.target.value;
        this.setState({
            isRequire: false,
            todoItem: value
        })
    }

    haddTodo = () => {
        const { handlerAddTodo } = this.props;
        let { todoItem } = this.state;
        if (!todoItem) {
            this.setState({isRequire: true});
            return;
        }
        handlerAddTodo(todoItem);
        this.setState({isRequire: false, todoItem: ""});
    }

    render() {
        const { isRequire, todoItem } = this.state;
        return (
            <div className="add-todo">
                <input onChange = {this.handlerTodoItem} 
                    value = {todoItem}
                    className={ isRequire ? "required" : ""}/>
                <button onClick={this.haddTodo}>添加待办</button>
            </div>
        )
    }
}

class TodoList extends React.Component {


    renderItem = (item) => {
        const { value, createDate, status } = item;
        const { handlerCompletedTodo, handlerRemoveTodo } = this.props;
        return (
            <div className="todo-item" key={item.id}>
                <span style={{float: "left"}}>{ value }</span>
                <span style={{}}>{ createDate }</span>
                {
                    "未完成" === status ? <span onClick={() => handlerCompletedTodo(item.id)} className = "status"> <Icon type="check" /></span> : null
                }
                <span className = "remove" onClick={()=> handlerRemoveTodo(item.id)}> <Icon type="close" /></span>
            </div>
        )
    }

    render() {
        const { todoList } = this.props;
        const total = todoList && todoList.length;
        return (
            <div className="todo-list">
                <div className="content">
                    { todoList.map(this.renderItem) }
                </div>
                <div className="footer">
                    共<span className="total">{total}</span>项任务
                </div>
            </div>
        )
    }
}